<!--
 * @Descripttion:欢迎页
 * @version:
 * @Author: ada.wu
 * @Date:2024-03-11 11:26:44
 * @LastEditors: ada.wu
 * @LastEditTime: 2024-04-11 10:32:45
-->
<template>
  <div class="hub">
    <div class="underline-text" v-html="activityDto.activityDetail"></div>
    <div class="underline-box"></div>
    <div class="agent-msg-bg"></div>
    <div class="fixed_bottom p-b-lg t-c">
      <van-button round color="#ffd000" @click="goUrl">确认</van-button>
    </div>
  </div>
</template>
<script lang="ts">
import { onMounted, reactive, toRefs, ref, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import { PageEnum } from "/@/enums/pageEnum";
import { useStore } from "/@/store";
export default {
  name: "welcome",
  components: {},
  setup() {
    const store = useStore();

    const router = useRouter();
    const route = useRoute();
    let { valuatorUserId = "", activityId = "" } = route.query;
    const state = reactive({
      isQuery: false,
      activityDto: <any>{
        activityDetail: "&emsp;",
      },
    });

    onMounted(async () => {
      if (activityId) {
        let res = await store.dispatch("exam/getActivityDetail", {
          activityId,
        });
        if (res && res.succ) {
          state.activityDto = res.content;
        }
      }
    });

    function goUrl() {
      let path = "";
      let query = {
        activityId: state.activityDto.activityId,
        valuatorUserId, //评价者
      };
      const { projectDetail } = state.activityDto;

      if (projectDetail) {
        path = PageEnum.REMIND; //作答页
      } else {
        path = PageEnum.EMPLOYEE; //人员
      }

      router.push({
        path,
        query,
      });
    }
    const goBack = () => {
      router.back();
    };
    return {
      ...toRefs(state),
      goUrl,
      goBack,
    };
  },
};
</script>

<style lang="scss" scoped>
.hub {
  background: url("/@/assets/exam/home-bg.png") no-repeat;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.underline-text {
  box-sizing: border-box;
  text-indent: 2em;
  width: 260px;
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-color: #e5e4e2;
  margin: 80px auto -55px auto;
  font-weight: 400;
  padding: 20px 15px 45px 15px;
  font-size: 14px;
  color: #616161;
  line-height: 32px;
  background: #fff;
  border-radius: 4px;
  position: relative;
  z-index: 2;
  max-height: 420px;
  overflow-y: scroll;
}

.underline-box {
  box-sizing: border-box;
  margin: 0 auto -233px auto;
  width: 310px;
  height: 110px;
  position: relative;
  z-index: 3;
  background: url("/@/assets/exam/welcome-mgs.svg") 0px 0px no-repeat;
  background-size: 100%;
  background-position: center bottom; /* 背景图片底部居中对齐 */
}

.agent-msg-bg {
  position: relative;
  width: 323px;
  height: 300px;
  margin: 0 auto;
  background: url("/@/assets/exam/welcome-mgs-bg.svg") 0px 0px no-repeat;
  background-size: 100%;
  z-index: 1;
}

@media screen and (min-width: 761px) {
  .underline-text {
    width: 330px;
  }
  .underline-box {
    width: 363px;
    height: 124px;
    margin-bottom: -275px;
  }
  .agent-msg-bg {
    width: 380px;
  }
}

@media screen and (max-width: 760px) {
}

@media screen and (max-width: 600px) {
}

@media screen and (max-width: 500px) {
}

@media screen and (max-width: 430px) {
  .underline-text {
    width: 330px;
  }
  .underline-box {
    width: 363px;
    height: 124px;
    margin-bottom: -275px;
  }
  .agent-msg-bg {
    width: 380px;
  }
}

@media screen and (max-width: 414px) {
  .underline-text {
    width: 290px;
  }
  .underline-box {
    width: 343px;
    height: 120px;
    margin-bottom: -262px;
  }
  .agent-msg-bg {
    width: 360px;
  }
}

@media screen and (max-width: 390px) {
  .underline-text {
    width: 310px;
  }
  .underline-box {
    width: 330px;
    height: 120px;
    margin-bottom: -252px;
  }
  .agent-msg-bg {
    width: 350px;
  }
}

@media screen and (max-width: 375px) {
  .underline-text {
    width: 260px;
  }
  .underline-box {
    width: 310px;
    height: 110px;
    margin-bottom: -220px;
  }
  .agent-msg-bg {
    width: 323px;
    height: 300px;
  }
}

@media screen and (max-width: 360px) {
}

@media screen and (max-width: 320px) {
  .underline-text {
    width: 250px;
  }
  .underline-box {
    width: 270px;
    height: 90px;
    margin-bottom: -200px;
  }
  .agent-msg-bg {
    width: 280px;
    height: 300px;
  }
}

.van-button--round {
  font-weight: 500 !important;
  font-size: 16px !important;
  color: #1a1446 !important;
  width: 200px;
}
</style>